<template>
  <div class="setpassword" ref="homePage" >
    <div class="setpassword-box">
      <div>
        <van-field placeholder="请输入账号" />
      </div>
      <div>
        <van-field type="password" placeholder="请确认密码" />
      </div>
      <div style="display: flex;height: 5rem;width: 100%;align-items: center;justify-content: center;    flex-direction: column;">
        <van-button type="default" round  style="width: 45%;" color="#51c5b8">提交</van-button>
        <span style="font-size: 0.75rem; color: #cfcfcf;display: block;height: 25px;line-height: 25px;text-align: center;">忘记密码？</span>
      </div>
    </div>
    <div>
      <van-divider :style="{ color: '#51c5b8', borderColor: '#51c5b8', padding: '0 16px' }">
        可以用以下账号登陆
      </van-divider>
      <div style="width: 100%;height: 6.25rem;display: flex;justify-content: center;align-items: center;">
          <van-icon name="alipay" size="40px"/>&#12288;
          <van-icon name="alipay" size="40px"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度

      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.height = this.clientHeight + 'px';
    },
  }
</script>

<style lang="scss">
  .setpassword{
    background: #f9f9f9;
    .setpassword-box{
        width: 100%;
        height: 17.5rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .van-cell{

          .van-field__control{
            height: 2.5rem;
            border-bottom: 0.0625rem solid #d6d6d6;
          }
        }
    }
  }
</style>
